<template>
    <a-card :bordered="false">
        <div class="table-operator">
            <a-button v-if="hasPerm('Base_DictionaryMain.Add')" type="primary" icon="plus"
                @click="handleAdd()">新建</a-button>
            <a-button v-if="hasPerm('Base_DictionaryMain.Delete')" type="primary" icon="minus"
                @click="handleDelete(selectedRowKeys)" :disabled="!hasSelected()" :loading="loading">删除</a-button>
            <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
        </div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="10">
                    <a-col :md="4" :sm="24">
                        <a-form-item label="类型">
                            <a-input v-model="queryParam.keyword" placeholder="关键字"  @keydown.enter="getDataList" />
                        </a-form-item>

                    </a-col>
                    <a-col :md="6" :sm="24">
                        <a-button type="primary"
                            @click="() => { this.pagination.current = 1; this.getDataList() }">查询</a-button>
                        <a-button style="margin-left: 8px"
                            @click="() => (this.queryParam = { condition: 'DicName', keyword: '' })">重置</a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <a-table ref="table" :scroll="{ y: tableHight }" :columns="columns" :rowKey="(row, index) => row.Id"
            :dataSource="data" :pagination="pagination" :loading="loading" @change="handleTableChange"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'checkbox' }"
            :bordered="true" size="small">
            <span slot="action" slot-scope="text, record">
                <template>
                    <a v-if="hasPerm('Base_DictionaryMain.Edit')" @click="handleEdit(record.Id)">编辑</a>
                    <a-divider v-if="hasPerm('Base_DictionaryMain.Edit') && hasPerm('Base_DictionaryMain.Delete')"
                        type="vertical" />
                    <a v-if="hasPerm('Base_DictionaryMain.Delete')" @click="handleDelete([record.Id])">删除</a>
                </template>
            </span>
        </a-table>
        <edit-form ref="editForm" :parentObj="this"></edit-form>
    </a-card>
</template>

<script>
import EditForm from './EditForm'

const columns = [
    // {
    //     title: '序号',
    //     align: 'center',
    //     width: '50px',
    //     scopedSlots: { customRender: 'dataIndex' }
    // },
    { title: '类型', dataIndex: 'TypeName', width: '30%', align: 'left' },
    { title: '名称', dataIndex: 'Text', width: '30%', align: 'left' },
    { title: '序号', dataIndex: 'Sort', width: '12%', align: 'left' },
    { title: '操作', dataIndex: 'action', width: '20%', align: 'left', scopedSlots: { customRender: 'action' } }
]

export default {
    components: {
        EditForm
    },
    mounted() {
        this.$nextTick(() => {
            // 页面渲染完成后的回调
            this.tableHight = this.getTableHeight(true) + 24.5
        })
        this.getDataList()
    },
    data() {
        return {
            tableHight: 570, // 表格高度
            disabled: false,
            data: [],
            pagination: {
                current: 1,
                pageSize: 25,
                showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
                pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
                showSizeChanger: true
            },
            filters: {},
            sorter: { field: 'Id', order: 'asc' },
            loading: false,
            columns,
            queryParam: { condition: 'TypeName' },
            selectedRows: [],
            selectedRowKeys: []
        }
    },
    methods: {
        handleTableChange(pagination, filters, sorter) {
            this.filters = { ...filters }
            this.getDataList()
        },
        getDataList() {
            this.selectedRowKeys = []
            this.loading = true
            this.$http.post('/Base_ProjectWork/Base_TakeNotesType/GetDataList', {
                PageIndex: this.pagination.current,
                PageRows: this.pagination.pageSize,
                SortField: this.sorter.field || 'Id',
                SortType: this.sorter.order,
                Search: this.queryParam,
                ...this.filters
            }).then(resJson => {
                this.loading = false
                this.data = resJson.Data
                // console.log(this.data);

                if (this.Data) {
                    const pagination = { ...this.pagination }
                    pagination.total = resJson.Total
                    this.pagination = pagination
                }
            })
        },
        inputKeyDown(e) {
            if (e.keyCode === 13) {
                if (!this.queryParam[0].keyword) return this.$message.error('请输入查询条件')
                this.getDataList()
            }
        },
        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        hasSelected() {
            return this.selectedRowKeys.length > 0
        },
        handleAdd() {
            this.$refs.editForm.openForm(null, '新建分类信息')
        },
        handleEdit(id) {
            this.$refs.editForm.openForm(id, '编辑分类信息')
        },
        handleDelete(ids) {
            const thisObj = this
            this.$confirm({
                title: '确认删除吗?',
                onOk() {
                    return new Promise((resolve, reject) => {
                        thisObj.$http.post('/Base_ProjectWork/Base_TakeNotesType/DeleteData', ids).then(resJson => {
                            resolve()
                            if (resJson.Success) {
                                thisObj.$message.success('操作成功!')
                                thisObj.getDataList()
                            } else {
                                thisObj.$message.error(resJson.Msg)
                                thisObj.getDataList()
                            }
                        })
                    })
                }
            })
        }
    }
}
</script>
